<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>" target="bottomFrame">
    <title>应急预案管理_预案管理首页</title>
    <!-- date css -->
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=basePath%>jclient/css/public/daterangepicker.css" />
   		<!-- date css -->
   		<!-- date javascript -->
		<script src="<%=basePath%>jclient/javascript/public/jquery.min.js"></script>
        <script src="<%=basePath%>jclient/javascript/public/bootstrap.min.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/moment.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/daterangepicker.js"></script>
		 <!-- date javascript -->  
	 	<!-- select -->
   		<link rel="stylesheet" href="<%=basePath%>jclient/css/public/style.css" type="text/css" />
   		<link href="<%=basePath%>jclient/css/public/select.css" rel="stylesheet" type="text/css" />
 		<script type="text/javascript" src="<%=basePath%>jclient/javascript/jslib/select-ui.min.js"></script>
   		<!-- select -->
   		<script type="text/javascript" src="<%=basePath%>jclient/javascript/jslib/jquery.idTabs.min.js"></script>
   	  	<style type="text/css">
   	  	#xhtab td{padding: 5px;}
   	  	</style>
   	  	<script type="text/javascript">
  		$(function(){
				// 日期选择
			    $('#cxdate').val(moment().subtract('days', 29).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
				$('#cxdate').daterangepicker(null, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                }); 
                 $('#gxdate').val(moment().subtract('days', 29).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
				$('#gxdate').daterangepicker(null, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                }); 
                $('#fbdate').val(moment().subtract('days', 29).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
				$('#fbdate').daterangepicker(null, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                }); 
                 $('#addfbdate').val(moment().format('YYYY-MM-DD'));
				$('#addfbdate').daterangepicker({ singleDatePicker: true }, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                 }); 
                $("#hcdiv .tiptop a").click(function(){$("#hcdiv").fadeOut(200);});
                $("#yaxqdiv .tiptop a").click(function(){$("#yaxqdiv").fadeOut(200);});
                $("#xyaDiv .tiptop a").click(function(){$("#xyaDiv").fadeOut(200);});
                $("#usual1 ul").idTabs(); 
        });
        function dealGj(flage){
	         if(flage==1){
	           if($("#allTJDiv").children().length==3){
	             alert("最多添加3个条件");
	           }else{
	              $("#allTJDiv").append($("#mbdiv").html());
	           }
	         }else{
	          $("#allTJDiv").children().last().remove();
	         }
        }
        function dealYA(v){
          $("#yaxqdiv").fadeIn(200);
        }
  	   </script>
  </head>
  <body>
   		<div class="tools" style="margin-top: 10px;padding: 0 10px;">
       <div style="width:80px;float: left;height: 30px;line-height: 30px;">
         <label>综合查询</label>
       </div>
       <div class="controls" style="width:210px;float: left;">
			<div class="input-group date datetime">
				<input id="cxdate" class="begindate form-control input-sm" size="16" type="text" value="" >
				<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
 			</div>
		</div>
	    <span style="float: left;display:inline-block;padding-left: 20px;height: 30px;line-height: 30px;">预案名称：</span>
	    <div style="width:410px;float: left;padding-left: 20px;">
         <input name="" type="text" class="scinput" style="position: relative;top: -3px;"/>&nbsp;&nbsp;&nbsp;&nbsp;<input name="" type="button" class="scbtn" value="查询"/>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="$('#hcdiv').fadeIn(200);" name="" type="button" class="scbtn" value="高级查询"/>
       </div>   
        
	    <ul class="toolbar1">
	         <li class="click" style="cursor: pointer;" onclick="$('#xyaDiv').fadeIn(200);"><span><img src="<%=basePath%>jclient/css/public/images/t01.png" style="position: relative;top: -7px;"/></span>添加</li>
	   	     <li><span><img src="<%=basePath%>jclient/css/public/images/t03.png" style="position: relative;top: -7px;"/></span>删除</li>
	   	     <li><span><img src="<%=basePath%>jclient/css/public/images/t01.png" style="position: relative;top: -7px;"/></span>批量下载</li>
	    </ul>
    </div>
    <table class="tablelist" style="width: 100%;">
    	<thead>
    	<tr>
	        <th width="4%"><input name="" type="checkbox" value="" checked="checked"/></th>
	        <th width="21%">编号<i class="sort"><img src="<%=basePath%>jclient/css/public/images/px.gif" /></i></th>
	        <th width="45%">预案名称</th>
	        <th width="10%">发布时间</th>
	        <th width="20%">操作</th>
        </tr>
        </thead>
        <tbody>
	        <tr>
		        <td><input name="" type="checkbox" value="" /></td>
		        <td>1</td>
		        <td>天津城市饮水源地（于桥水库）蓝藻爆发应急预案（修订版）</td>
		         <td>2012年8月23日</td>
		        <td><a href="javascript:function nufu(){return false;}" onclick="dealYA('天津城市饮水源地（于桥水库）蓝藻爆发应急预案（修订版）');" class="tablelink">编辑</a>    <a href="#" class="tablelink">下载</a></td>
	        </tr> 
	        <tr>
		        <td><input name="" type="checkbox" value="" /></td>
		        <td>2</td>
		        <td>天津高峰用水突发事件应急预案</td>
		        <td>2012年8月21日</td>
		        <td><a href="#" class="tablelink">编辑</a>   <a href="#" class="tablelink">下载</a></td>
	        </tr> 
         </tbody>
    </table>
    <!--高级查询-->
	<div id="hcdiv" class="tip" style="width: 550px;height: 300px;z-index: 100;top: 30px;">
			<div class="tiptop"><span>高级查询</span><a></a><span style="position: relative;left: 370px;">确定</span></div>
			<h5>&nbsp;&nbsp;输入内容检索条件：</h5>
			&nbsp;&nbsp;&nbsp;<img alt="添加条件" onclick="dealGj(1);" style="cursor: pointer;" src="<%=basePath%>jclient/images/add.jpg" width="20x" height="20px">
			&nbsp;&nbsp;&nbsp;<img alt="删除条件" onclick="dealGj(0);" style="cursor: pointer;" src="<%=basePath%>jclient/images/delete.jpg" width="20x" height="20px">
			<div  id="mbdiv" style="display: none;">
				<div style="height: 30px;padding-left: 10px;margin-top: 10px;clear: both;">
					<span class="uew-select" style="width: 110px;float: left;"><div style="width: 100px;" class="uew-select-value ue-state-default"><em class="uew-select-text">名称</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
		                   <select style="width: 100px;" class="select3">
						        <option>名称</option>
		   						<option>关键词</option>
		   						<option>发布时间</option>
						    </select>
			       </span>
			       <input type="text" class="scinput" style="float: left;margin-right: 10px;">
			       <span class="uew-select" style="width: 110px;float: left;"><div style="width: 100px;" class="uew-select-value ue-state-default"><em class="uew-select-text">并含</em><em class="uew-icon uew-icon-triangle-1-s"></em></div>
		                   <select style="width: 100px;" class="select3">
						      <option>并含</option>
						      <option>或含</option>
						      <option>不包含</option>
						    </select>
			       </span>
			       <input type="text" class="scinput" style="float: left;">
			   </div>
		   </div>	
		   <div  id="allTJDiv"></div>
		   <h5 style="clear: both;">&nbsp;&nbsp;输入时间检索条件：</h5>
		   <span style="display: block;float: left;height: 30px;line-height: 30px;">&nbsp;&nbsp;发布时间:</span>
		   <div class="controls" style="width:210px;float: left;">
				<div class="input-group date datetime">
					<input id="fbdate" class="begindate form-control input-sm" size="16" type="text" value="" >
					<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	 			</div>
 			</div>
 			<span style="display: block;float: left;height: 30px;line-height: 30px;">&nbsp;&nbsp;更新时间:</span>
			<div class="controls" style="width:210px;float: left;">
				<div class="input-group date datetime">
					<input id="gxdate" class="begindate form-control input-sm" size="16" type="text" value="" >
					<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	 			</div>
			</div>
	</div>
	<!--高级查询-->
	<!--预案详情-->
	<div id="yaxqdiv" class="tip" style="width: 560px;height: 410px;z-index: 100;top: 30px;border: 1px solid #cccccc;">
			<div class="tiptop"><span>预案详情</span><a></a></div>
			<div id="usual1" class="usual"> 
			    <div class="itab">
				  	<ul> 
				    <li><a href="#tab1" class="selected">适用范围</a></li> 
				    <li><a href="#tab2">事件分级 </a></li> 
				    <li><a href="#tab3">先期处置 </a></li> 
				    <li><a href="#tab4">应急响应 </a></li> 
				    <li><a href="#tab5">后期处理 </a></li> 
				  	</ul>
			    </div> 
			    <div id="tab1" class="tabson" align="center"  style="padding:0px 5px 5px 5px;">
				    <textarea rows="10" cols="87" style="height: 250px;">  Ⅲ级响应
		       （1）市指挥部办公室及时向市指挥部报告灾情和应对工作开展情况，重要情况向市应急办报告。
		       （2）市指挥部办公室下发防御通知，部署防御工作；市灾情召开分析会，派出工作组到受灾较重地区知道抢险救灾工作。
		       （3）市水务局负责应急处置工作，组织好引滦眼线蓝藻打捞、重点区域的曝气和水厂对源水水质的监测与分析，筛选水处理最佳方案等工作。
	               （4）市环保局做好藻类监测、分析预警等工作。
		       （5）市气象局负责做好于桥水库区域气象信息采集、通报、研判工作，负责向市指挥部办公室提供科学决策建议。</textarea>
			  	</div>
			  	<div id="tab2" class="tabson" style="padding:0px 5px 5px 5px;">
			  	<textarea rows="10" cols="87" style="height: 250px"></textarea>
			  	</div>
			  	<div id="tab3" class="tabson" style="padding:0px 5px 5px 5px;">
			  	<textarea rows="10" cols="87" style="height: 250px"></textarea>
			  	</div>
			  	<div id="tab4" class="tabson" style="margin-top:5px;padding:0px 5px 5px 5px;">
			  	   &nbsp; &nbsp;<input name="" type="button" class="scbtn" value="Ⅰ级"/>
			  	   <input name="" type="button" class="scbtn" value="Ⅱ级"/>
			  	   <input name="" type="button" class="scbtn" value="Ⅲ级"/>
			  	   <textarea rows="10" cols="90" style="height: 220px"></textarea>
			  	</div>
			  	<div id="tab5" class="tabson" style="padding:0px 5px 5px 5px;">
			  	<textarea rows="10" cols="87" style="height: 250px;"></textarea>
			  	</div>
	       </div>
	       <div align="center"> <input name="" type="button" class="scbtn" value="保存"/></div>
	 </div>
	<!--预案详情-->
	<!--新建预案-->
<div id="xyaDiv" class="tip" style="width: 500px;height: 500px;z-index: 100;top: 30px;">
<div class="tiptop"><span>新建预案</span><a></a></div>
<div style="overflow-y: scroll;height: 450px;">
    			<form action="" name="myform">
    			<table id="xhtab" cellpadding="0" cellspacing="0" border="1px" style="height: 100%;">
    				
    			    <tr>
    			       <td width="70px" style="padding-left:10px;">预案名称</td>
    			       <td id="hyNametd" colspan="3" style="padding-left:10px;">
    					  <input type="text" class="scinput" style="width: 390px;">
    			       </td>
    			    </tr>
    				<tr>
    					<td  style="padding-left:10px;">发布时间</td>
    					<td width="150px"style="padding-left:10px;" >
    						<div class="controls" style="width:150px;">
								<div class="input-group date datetime">
									<input id="addfbdate" class="begindate form-control input-sm" size="16" type="text" value="">
									<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
								</div>
							</div>
    					</td>
    					<td style="padding-left:10px;">关键词</td>
    					<td width="150px" ><input type="text" class="scinput"></td>
    				</tr>
    				<tr>
    					<td width="70px" style="padding-left:10px;">试用范围</td>
    			        <td colspan="3" style="padding-left:10px;">
    			          <textarea rows="4"   style="border:solid 1px #a7b5bc;width: 390px;height: 60px;line-height: 25px;letter-spacing: 0px;list-style: none;"></textarea>
    			        </td>
    			    </tr>
    			    <tr>
    					<td width="70px" style="padding-left:10px;">事件分级</td>
    			        <td colspan="3" style="padding-left:10px;">
    			          <textarea rows="4"   style="border:solid 1px #a7b5bc;width: 390px;height: 60px;line-height: 25px;letter-spacing: 0px;list-style: none;"></textarea>
    			        </td>
    			    </tr>
    			    <tr>
    					<td width="70px" style="padding-left:10px;">先期处置</td>
    			        <td colspan="3" style="padding-left:10px;">
    			          <textarea rows="4"   style="border:solid 1px #a7b5bc;width: 390px;height: 60px;line-height: 25px;letter-spacing: 0px;list-style: none;"></textarea>
    			        </td>
    			    </tr>
    			    <tr>
    					<td width="70px" style="padding-left:10px;">紧急响应</td>
    			        <td colspan="3" style="padding-left:10px;">
    			          <textarea rows="4"   style="border:solid 1px #a7b5bc;width: 390px;height: 60px;line-height: 25px;letter-spacing: 0px;list-style: none;"></textarea>
    			        </td>
    			    </tr>
    			    <tr>
    					<td width="70px" style="padding-left:10px;">后期处理</td>
    			        <td colspan="3" style="padding-left:10px;">
    			          <textarea rows="4"   style="border:solid 1px #a7b5bc;width: 390px;height: 60px;line-height: 25px;letter-spacing: 0px;list-style: none;"></textarea>
    			        </td>
    			    </tr>
    				<tr>
    					<td style="padding-left:10px;">应急队伍</td>
    					<td width="150px" style="padding-left:10px;"><input type="file" style="width: 150px;" ></td>
    					<td  style="padding-left:10px;">应急资源</td>
    					<td width="150px" ><input type="file" style="width: 150px;"></td>
    				</tr>
    				<tr>
    					<td style="padding-left:10px;">预案全文</td>
    					<td width="150px" style="padding-left:10px;"><input type="file"  style="width: 150px;"></td>
    					<td  ></td>
    					<td ></td>
    				</tr>
    			</table>
    			
    			<p align="center" style="margin-top: 10px;">
    			  <input name="" type="button" class="scbtn" value="保存"/>
    			</p>
    			</form>
    	</div>
   </div>
  <!--新建预案--> 
  </body>
</html>
